<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

<style type="text/css">
.item {
	height: 200px;
	margin: 10px;
	padding: 0;
	border: 1px solid #70c3ff;
	border-radius: 5px;
	cursor: pointer;
}

.img {
	height: 100px;
	width: 100px;
	border: 1px solid #70c3ff;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.info {
	width: 100%;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.info div {
	word-break: break-all;
}

.back .info {
	width: 100%;
	height: 100%;
	font-size: 120%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: 10%;
}

.name {
	font-size: 150%;
}

.province {
	font-size: 120%;
}

.source {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.item:hover {
	box-shadow: 0 10px 20px 2px lightgray;
	position: relative;
	top: -3px;
}

.front, .back {
	height: 100%;
	width: 100%;
	backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #70c3ff;
}

.front {
	z-index: 2;
}

.back {
	transform: rotateY(180deg);
}

.flipContainer {
	height: 100%;
	width: 100%;
	transition: 0.5s;
	transform-style: preserve-3d;
}

.flip {
	transform: rotateY(180deg);
}

.light {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
	background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0),
		rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
	transform: skewx(-25deg);
	-o-transform: skewx(-25deg);
	-moz-transform: skewx(-25deg);
	-webkit-transform: skewx(-25deg);
}

.options {
	font-size: 120%;
	color: white;
	background-color: rgba(127, 127, 127, 0.2);
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 5% 30%;
	display: flex;
	justify-content: space-between;
	z-index: 4;
}

.glyphicon-trash:hover {
	color: red;
}

.glyphicon-pencil:hover {
	color: blue;
}
</style>

<div class="container-fluid">
	<div class="row">
		<c:forEach var="school" items="${schools}" varStatus="status">
			<div class="item col-xs-12 col-sm-5 col-md-2 col-lg-2">
				<div class="flipContainer">
					<div class="front">
						<div class="img">
							<image class="source" src="<c:url value='/images/huashi.png'/>"
								alt="学校图片"></image>
						</div>

						<div class="info">
							<div class="name">${school.schoolName}</div>
							<div class="province">${school.province}</div>
							<div class="city">${school.city}</div>
						</div>
						<i class="light"></i>
					</div>

					<div class="back">
						<div class="info">
							<div class="homepage">官网：${school.homepage}</div>
							<div class="address">地址：${school.address}</div>
							<div class="postcode">邮编：${school.postcode}</div>
							<div class="phone">电话：${school.phone}</div>
						</div>
						<i class="light"></i>
						<div class="options">
							<span data-id="${school.schoolId}"
								class="glyphicon glyphicon-trash" aria-hidden="true"></span> <span
								data-id="${school.schoolId}" class="glyphicon glyphicon-pencil"
								aria-hidden="true"></span>
						</div>
					</div>
				</div>
			</div>
		</c:forEach>
	</div>
	<tfoot>
		<tr>
			<th class="pager-th"><%@ include
					file="/WEB-INF/views/shared/master/pager.jsp"%>
			</th>
		</tr>
	</tfoot>
</div>

<script>
	$('.item').click(function() {
		var $container = $(this).children().last();
		var $options = $(this).find('.options');
		$container.toggleClass('flip');
		if ($container.hasClass('flip')) {
			$options.hide().fadeIn(500);
		} else {
			$options.hide();
		}
	});

	$('.item').mouseenter(function() {
		var $light = $(this).find('.light');

		$light.css('width', '50%').animate({
			left : '150%'
		}, 200, function() {
			$light.css({
				'width' : '0',
				'left' : '0'
			});
		});
		$(this).find('.options').fadeIn(500);
	});

	$('.item').mouseleave(function() {
		$(this).find('.options').fadeOut(500);
	});

	$('.options').click(function(event) {
		event.stopPropagation();
	});

	$('.glyphicon-pencil').click(
			function() {
				var id = $(this).attr('data-id');
				if (isEditor(id)) {
					top.openModal("/admin/baseInfo/school/schoolDetailed?key=" + id, "school_form", "学院详情-修改", 800, 357);
				}
			})

	$('.glyphicon-trash').click(
			function() {
				var id = $(this).attr('data-id');
				if (isEditor(id)) {
					var url = $.getVirtualPath() + "/admin/baseInfo/school/delete?key=" + id;
					deleteDataEx(url, function(data) {
						if (data.resultType == "success") {
							formSubmit();
						}
					});
				}
			})
</script>